<template>
  <div v-loading="loading" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons')
import resize from './mixins/resize'
import { moneyFormat } from '@/utils/ruoyi'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chartType'
    },
    paramDealType: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chart: null,
      loading: false,
      optionData: [
        { value: 1048, name: '控股投资' },
        { value: 735, name: '参股投资' },
        { value: 580, name: '基金投资' },
        { value: 484, name: '金融资产' }
      ],
      dialogVisible: false
    }
  },
  watch: {
    chartData: {
      handler() {
        this.initChart()
      },
      deep: true,
      immediate: true
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      console.log('---dealDataCharts---', this.chartData)
      this.optionData = this.chartData || []
      this.chart = echarts.init(this.$el, null)
      this.chart.on('click', this.clickDealType)
      this.chart.setOption({
        color: ['#226FFD', '#FC9200', '#22E8E9', '#0D9241', '#01ACFE'],
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            // console.log(params)
            return `${params.marker}` + `${params.name}` + '(' + `${params.percent}%` + ')' + `<br/>` +
              '项目数量(个):' + moneyFormat(params.data.dealCount) + '<br/>' +
              '投资成本(万):' + moneyFormat(params.data.fk, 'w') + '<br/>' +
              '回款金额(万):' + moneyFormat(params.data.hk, 'w') + '<br/>' +
              '最新估值(万):' + moneyFormat(params.data.gz, 'w') + '<br/>'
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['28%', '40%'],
            center: ['50%', '60%'],
            avoidLabelOverlap: true,
            minAngle: 15,
            label: {
              alignTo: 'edge',
              formatter: function(params) {
                console.log(params)
                var p = moneyFormat(params.value, 'w') + '万'
                if (params.data.paramDealType === 'dealNumber') {
                  p = moneyFormat(params.value) + '个'
                }
                return `{aa|${params.name}}\n{bb|${p}}\t\t{cc|${params.percent}%}`
              },
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                aa: {
                  height: 25,
                  align: 'left',
                  fontSize: 12,
                  color: '#55e0ff'
                },
                bb: {
                  height: 25,
                  align: 'left',
                  fontSize: 11,
                  color: '#ffffff'
                },
                cc: {
                  height: 25,
                  align: 'left',
                  fontSize: 10,
                  color: '#ffffff'
                }
              }
            },
            labelLine: {
              length: 15,
              length2: 0,
              maxSurfaceAngle: 80
            },
            data: this.optionData
          },
          {
            type: 'pie',
            name: '外圆环',
            radius: ['44%', '45%'],
            center: ['50%', '60%'],
            hoverAnimation: false,
            itemStyle: {
              normal: {
                color: 'rgba(32,111,255,0.3)'
              }
            },
            label: {
              show: false
            },
            data: [100]
          },

          {
            type: 'gauge',
            radius: '35%',
            center: ['50%', '60%'],
            clockwise: true,
            startAngle: 0,
            endAngle: 359.9,
            splitNumber: 100,
            hoverAnimation: true,
            axisTick: {
              show: false
            },
            splitLine: {
              length: 5,
              lineStyle: {
                width: 1,
                color: 'rgba(32,111,255,0.3)'
              }
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: false
            },
            axisLine: {
              show: false
            },
            detail: {
              show: false
            }
          }
        ],
        animationEasing: 'cubicInOut',
        animationDuration: 3000
      })
    },
    // 点击事件
    clickDealType(param) {
      const data = {
        dealType: param.data.dealType, // 当前下拉框选中的类型
        paramDealType: param.data.paramDealType, // 当前下拉框选中的类型
        name: param.data.name // 当前下拉框选中的类型名称
      }
      this.$emit('clickDealType', data)
    }
  }
}
</script>
